<template>
    <div class="flex flex-wrap">
        <sidebar />
        <div class="p-8">
            <ai-writer-nav title="公众号" subtitle="写文章"
                image="https://st0.dancf.com/market-operations/market/side/1689667454937.png"></ai-writer-nav>

            <div class=" my-4 flex justify-between text-sm">
                <div><span class="text-red-500">*</span>内容需求</div>
                <el-popover trigger="hover" width="300px">
                    <template #reference>
                        <div class="cursor-pointer">试试范文</div>
                    </template>
                    <div class="rounded-lg bg-white">
                        <div class="p-2 cursor-pointer hover:bg-gray-100" v-for="(item, index) in tips" :key="index"
                            @click="input = item.desc">
                            {{
                            item.title }}</div>
                    </div>
                </el-popover>
            </div>
            <el-input v-model="input" placeholder="请输入创意描述" :rows="7" type="textarea"></el-input>
            <div class="my-4  text-sm">是否配图</div>
            <el-radio-group v-model="includePic">
                <el-radio value="AI配图">AI配图</el-radio>
                <el-radio value="不配图">不配图</el-radio>
            </el-radio-group>
            <div class="my-4  text-sm">字数要求</div>
            <el-radio-group v-model="wordLimit">
                <el-radio-button label="200字" value="200" />
                <el-radio-button label="300字" value="300" />
                <el-radio-button label="500字" value="500" />
                <el-radio-button label="1000字" value="1000" />
            </el-radio-group>
            <el-button class="my-4 w-full" type="primary" @click="confirm">立即生成</el-button>

        </div>

        <div id="outputbox"  v-if="output" class=" bg-gray-100 p-16 flex-1 ">
                <div v-html="output"></div>
                <div class="text-sm text-gray-500">字数：{{ wordNum }}</div>
        </div>
        <ai-writer-rightbar v-else></ai-writer-rightbar>
    </div>
</template>
<script setup>
useSeoMeta({
    title: 'AI文案-公众号内容AI扩写，一键扩写公众号内容，让文章更有营养',
    ogTitle: 'AI文案-公众号内容AI扩写，一键扩写公众号内容，让文章更有营养',
    description: '明志智图AI绘图工具是一款智能化的绘图工具，提供了各种功能和工具，帮助您快速创作出各种高质量的图形和图像。无论是进行创意设计、创意制作，还是对图片进行处理和优化，明志智图AI都提供了最佳的解决方案。',
    ogDescription: '明志智图AI绘图工具是一款智能化的绘图工具，提供了各种功能和工具，帮助您快速创作出各种高质量的图形和图像。无论是进行创意设计、创意制作，还是对图片进行处理和优化，明志智图AI都提供了最佳的解决方案。',
    ogImage: 'https://cdn.mzyun.tech/logo_black.png',
    keywords:"AI创作,AI写作,AI创作工具,AI文案,明志科技,明志"
})
import { marked } from 'marked'
const input = ref('')
const output = ref('')
const tips = ref([{
    title: '端午节祝福',
    desc: '以端午节喜乐安康为主题，从端午节吃粽子、赛龙舟、吃”十二红“、喷雄黄、浴兰汤、祭屈原等习俗展开，结尾用一首诗祝福端午安康。'
}, {
    title: '芒种节气',
    desc: '以”芒种节气“为主题写一篇文章，从芒种起源、芒种气候、芒种民俗、芒种养生等方向展开。'
}, {
    title: '停止内耗',
    desc: '以“停止内耗”为主题，从抱怨、敏感、纠缠、焦虑等方向展开，劝告读者不要再内耗。'
}, {
    title: '人工智能与教育',
    desc: '以“人工智能在教育领域的应用”为主题，从人工智能对学习环境、学习过程、教师工作的赋能，以及应用挑战等方向展开。'
}])
const includePic = ref('AI配图')
const wordLimit = ref('200')
const wordNum = ref(0)

const store = useUserStore();
const showLogin=inject("showLogin")
const confirm = () => {
    if(!store.isLogin){
        showLogin.value=true
        return false;
    }
    if (!input.value) {
        ElMessage.error('创意描述不能为空')
        return false;
    }
    const message = ref('')
    message.value = input.value + '，字数要求' + wordLimit.value + '字，' + includePic.value

    useEventSource("/api/bailian/chat", { message: message.value }, function (data) {
        output.value = marked.parse(data.output.text)
        wordNum.value = data.output.text.length
    })


}


</script>